<template>
    <div id="activityList">
        <div class="header-box">
            <div class="category-box"><span>首页 </span>&gt; 活动列表</div>
        </div>
		<div class="tool-box">
            <!--<ul>
                <li v-for="(item, index) in listTypeData" 
                    :class="{'active': index===currentListType}"
                    @click="chooseListType(index)">{{item}}</li>
            </ul>-->
            <el-input placeholder="按活动名称进行搜索" v-model="searchInput">
                <el-button slot="append" @click="fetchActivityList"><i class="fa fa-search" aria-hidden="true"></i></el-button>
            </el-input>
            <div class="btn" @click="toNewActivity">新建活动</div>
        </div>
        <table v-loading="loading">
            <thead>
                <tr>
                    <td class="operate" >活动名称</td>
                    <td @click="sortActivity(1)" class="cursor">权重<i class="fa " :class="{'fa-caret-down':!sortItem,'fa-caret-up':sortItem}" aria-hidden="true"></i></td>
                    <td @click="sortActivity(2)" class="operate cursor" style="width:10%">创建日期<i class="fa" :class="{'fa-caret-down':!dateItem,'fa-caret-up':dateItem}" aria-hidden="true"></i></i></td>
                    <td class="operate condition-td">活动类型</td>
                    <td>有效期</td>
                    <td class="operate condition-td">状态
                    
                        <!--<i class="fa fa-angle-down" aria-hidden="true"></i>
                            <div class="td-condition-box">
                            <p v-for="(item, index) in conditionFilter"
                               :class="{'blueColor': index===currentListCondition}"
                               @click="chooseConditon(item, index)">{{item.type}}</p>
                        </div>-->
                    </td>
                    <td style="width:120px">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in dataList">
                        <td><p  class="text-center activity-name">{{item.name}}</p></td>
                        <td>{{item.weight}}</td>
                        <td>{{item.created_at}}</td>
                        <td>{{item.model.name}}</td>
                        <td>{{item.startTime}}<br>{{item.endTime}}</td>
                        <td :class="{'item-green':item.stu==1&&item.isPause==0,'item-gray':item.isPause==1||(item.stu!=1&&item.isPause!=1),'item-yellow':item.stu==2&&item.isPause!=1}">{{item | stateActivityFliter}}</td>
                        <td class="operate-td" style="width:120px">
                            <span @click="openQrBox(item)">二维码</span>
                            <span>|</span>
                            <span class="more-td-btn">更多<i class="fa fa-angle-down" aria-hidden="true"></i>
                                <div class="td-more-box">
                                    <p v-if="item.model.rule=='vote'"><span @click="outPut(item.id)">导出结果</span></p>
                                    <p v-if="item.model.rule=='vote'" @click="voteData(item.id)">数据</p>
                                    <p v-if="item.model.rule=='vote'" @click="voteRecord(item.id)">投票记录</p>
                                    <p @click="toLinkUrl(item)">活动链接</p>
                                    <p @click="editActivity(item)" v-show="item.stu!=1||item.isPause!=0">编辑活动</p>
                                    <p @click="copyActivity(item)">复制活动</p>
                                    <!--<p>清空报表</p>-->
                                    <p ><span @click="setWeight(item)" >权重</span></p>
                                    <p @click="deleteActivity(item)">删除活动</p>
                                    <p v-if="item.isPause=='1'"><span @click="startActivity(index,item.id,'0')" >开始</span></p>
                                    <p v-else><span @click="startActivity(index,item.id,'1')" >暂停</span></p> 
                                </div>
                            </span>
                        </td>   
                </tr>
            </tbody>
        </table>
        <div class="add-prize-footer text-center" v-show="dataList.length>0">
            <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange"
                >
            </el-pagination>
        </div>
        <div class="no-data" v-show="dataList.length===0">
            <p v-show="!loading">您还没有创建应用内活动？<span @click="toNewActivity">去创建一个</span></p>
        </div>

        <!-- 二维码弹框 -->
        <!-- 上传图片弹框 -->
        <div class="add-prize-mask" v-if="qrcodeBox" >
            <div id="upload-pic-box">
                <div class="add-prize-header">
                    应用场景
                    <span class="upload-close" @click="closeQrBox"></span>
                </div>
                <div>
                    <div class="tabs-box" >
                        <div class="float-left text-center cursor tabs-items" @click="changeTabs(1,isWxOpenShow)" :class="{'tabs-items-active':tabsItemActive==1,'upload-null':!isWxOpenShow}" >微信查看</div>
                        <div class="float-left text-center cursor tabs-items" @click="changeTabs(2,isAppLinkShow)" :class="{'tabs-items-active':tabsItemActive==2,'upload-null':!isAppLinkShow}">App下载</div>
                    </div>
                    <div class="upload-body text-center">
                        <!--<div class="upload-left-box"></div>-->
                    <div class="upload-right-box">
                            <div class="text-hit text-center" v-show="qrCodeNull">暂无链接二维码</div>
                            <div  ref="qrcode"></div>
                            <div class="loading-code" v-show="qrboxLoading">
                                <img src="./../assets/img/qr_code.gif">
                            </div>
                            
                            <p>扫码预览</p>
                            <div class="text-center clear-both" >
                                <div id="success_form_input" class="input-like-box float-left">{{qrcodeUrl}}</div>
                                <span ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyText" class="float-left copy-link" type="danger">复制</span>
                            </div>                         
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="活动链接"
            :visible.sync="activityLinkShow"
            size="tiny"
            class="activity-link">
            <div class="text-center clear-both" >
                <div id="success_form_input" class="input-like-box float-left">{{activityLinkUrl}}</div>
                <span ref="actCopyLink" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyActLink" class="float-left copy-link" type="danger">复制</span>
            </div> 
            <span slot="footer" class="dialog-footer"> 
                <el-button type="primary" @click="activityLinkShow = false">关 闭</el-button>
            </span>
        </el-dialog> 
    </div>
</template>

<script>
    import * as api from './../api/api'
    import QRCode from 'qrcodejs2'
    export default {
    	data(){
    		return {
                activityLinkShow:false, //活动链接弹出框
                activityLinkUrl:'', 
                qrCodeNull:false,
                qrcode: '',
                isWxOpenShow:false,
                qrcodeUrl: '',
                isAppLinkShow:false,
                wxUrl:'',  //
                appLinkUrl:'', //app下载链接
                qrcodeBox: false,
                loading: true,
                qrboxLoading: false,
                currentListType: 0,
                // listTypeData: ['公众号H5', '应用内H5'],
                dataList: [],
                actConditionCode: {
                    '1': '进行中',
                    '2': '未开始',
                    '3': '已暂停',
                    '4': '已结束'
                },
                currentListCondition: 0,
                conditionFilter: [
                    {
                        type: '全部',
                        value: ''
                    },{
                        type: '进行中',
                        value: '1'
                    },{
                        type: '未开始',
                        value: '2'
                    },{
                        type: '已暂停',
                        value: '3'
                    },{
                        type: '已结束',
                        value: '4'
                    }
                ],
                currentListTypeFilter: 0,
                sortItem:false,  //权重排序
                dateItem:false,  //权重排序
                sortName:'',  //排序
                sortOrder:'aesc',
                searchInput:'', //搜索
                current_page:1, //当前页码
                last_page:'',//最后一页
                limit:10, //一页显示多少条
                total:0, //总条数

                tabsItemActive:0, //应用场景tabs切换
                copyBtn:null, //存储初始化复制按钮事件 
    		}
    	},
    	components: {
    		QRCode
    	},
    	mounted(){
            this.fetchActivityList();         
    	},
        computed: {

        },
    	methods: {
            //获得活动列表
            fetchActivityList(){
                let vm = this;
                vm.loading = true;
                let body={
                    search:vm.searchInput, //搜索
                    category: '2',
                    order: vm.sortOrder,
                    limit: vm.limit,
                    offset: (parseInt(vm.current_page)-1)*parseInt(vm.limit),
                    soft:vm.sortName
                };
                api.activityList(body).then(res => {
                    vm.loading = false;
                    let arr = res.data.data.rows;
                    let _now = +new Date();
                    arr.map(function (ele, i) {
                        let _start = +new Date(ele.startTime);
                        let _end = +new Date(ele.endTime);
                        if (_now < _start) { //未开始
                            ele['stu'] = '0';
                        } else if (_now >= _start && _now <= _end) { //进行中
                            ele['stu'] = '1';
                        } else if (_now > _end) { //已结束
                            ele['stu'] = '2';
                        }
                    })
                    vm.dataList = res.data.data.rows;
                    vm.total=res.data.data.total;
                }).catch(err=>{
                    vm.httpStatusCode(err);
                })    
            },
            //导出结果
            outPut(id){
                window.location.href = 'http://hongbao.testmorefun.chinamcloud.com/web/vote/getValidationData?activity_id=' + id;
            },
            //活动链接
            toLinkUrl(item){
                let vm = this; 
                vm.activityLinkShow=true;
                let h=location.href.split('#')[0];  
                vm.activityLinkUrl=`${h}api${item.template.url}`;
                setTimeout(function(){
                    vm.copyActLink();
                },200); 
            },
            //编辑活动
            editActivity(item){
                // console.log(item.model.rule); 
                if(item.model.rule=="prize-code"){
                    this.$router.push({name:'eidtTplCode',query:{'activityId':item.id,'editTplId':item.template_id}})
                }else if(item.model.rule=="vote"){
                    this.$router.push({name:'editVoteScreen',query:{'activityId':item.id,'editTplId':item.template_id}})
                }else{
                    this.$router.push({name:'editCommonTpl',query:{'activityId':item.id,'editTplId':item.template_id}})
                }
            },
            //复制活动
            copyActivity(item){
                let vm = this;
                api.copyActivityItem(item.id).then(res=>{
                    vm.fetchActivityList(); 
                    vm.$message({ message: '复制成功', type: 'success' });
                })
            },
            //删除活动
            deleteActivity(item){
                let vm = this;
                let body={
                    id:item.id
                };
                api.deleteActivity(body).then(res=>{
                    if(res.data.code==0){
                        vm.fetchActivityList(); 
                        vm.$message({showClose: true,message: res.data.message});
                    }
                })
            },
            //点击当前的页数
            pageChange(a){
                this.current_page=a;
                this.fetchActivityList();
            },
            chooseListType(index){
                this.currentListType = index;
            }, 
            chooseConditon(item, index){
                this.currentListCondition = index;
            },
            chooseType(item, index){
                this.currentListTypeFilter = index;
            },
            //新建活动
            toNewActivity(){
                this.$router.push({name:'newActivity'});
            },
            //设置权重
            setWeight(item){ 
                let vm= this;
                vm.$prompt('设置权重', item.name, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\+?[0-9][0-9]*$/,
                    inputErrorMessage: '权重必须大于0'
                    }).then(({ value }) => {
                        api.psotSetWeight({id:item.id,weight:value}).then(res=>{
                            if(res.data.code==0||res.data.code==200){
                                vm.fetchActivityList();   
                                vm.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                            };
                        }) 
                    }) 
            },
            //开始/暂停活动
            startActivity(index, id, status){
                var that = this;
               api.activityQrcode({
                        id:id
                }).then(res=>{
                    if(res.data.data.wechat_auth){
                        api.modifyActivityState({
                            id,
                            isPause: status
                        }).then(res => {
                            if(res.data.code==0){
                                that.dataList[index].isPause = that.dataList[index].isPause=='1'?'0':'1';
                            }
                        }).catch(err=>{
                            that.httpStatusCode(err);
                        })  
                    }else{
                        that.$message({showClose: true,message: res.data.data.wechat});
                    }
                })
                
            },
            //切换二维码tabs
            changeTabs(a,b){
                if(a==1){
                    if(b){
                        this.tabsItemActive=1;
                        this.qrcodeUrl=this.wxUrl;
                        this.qrcodeEvent(this.qrcodeUrl);
                    }else{
                        this.$message({showClose: true,message: '暂无链接二维码'});
                    }
                }else{ 
                    if(b){
                        if(this.appIsOpen){
                            this.tabsItemActive=2;
                            this.qrcodeUrl=this.appLinkUrl;
                            this.qrcodeEvent(this.qrcodeUrl);
                        }else{
                            this.$message({showClose: true,message: '暂无链接二维码'});
                        } 
                    }else{
                        this.$message({showClose: true,message: '暂无链接二维码'});
                    }
                }
            },
            //关闭二维码弹窗
            closeQrBox(){
                this.qrcodeBox = false;
            },
            //打开二维码弹窗
            openQrBox(item){
                var that = this;
                if(item.isPause==0){
                    that.qrCodeNull=false;
                    that.qrboxLoading = true;
                    that.qrcodeBox = true;
                    api.activityQrcode({
                        id:item.id
                    }).then(res => {
                        that.qrboxLoading = false;
                        if (res.data.code == 0||res.data.code==200) {
                            that.copyText();   //复制链接
                            that.isWxOpenShow=res.data.data.wechat_auth;  //是否开启微信
                            that.wxUrl =  decodeURIComponent(res.data.data.wechat);   //微信链接 
                            //app链接是否为空
                            that.appIsOpen= res.data.data.ways.app.is_open=='on'?true:false;
                            if(res.data.data.ways.app.app_urls!='[]'&&res.data.data.ways.app.app_urls!='null'){
                                that.isAppLinkShow=true;
                                that.appLinkUrl=  decodeURIComponent(res.data.data.ways.app.app_urls); 
                            }else{
                                that.appLinkUrl='';
                                that.isAppLinkShow=false;
                            }
                            //
                            if(that.isWxOpenShow){
                                that.tabsItemActive=1;
                                that.qrcodeUrl=that.wxUrl;   //微信链接   
                            }else if(that.isAppLinkShow){
                                that.tabsItemActive=2;
                                that.qrcodeUrl=that.appLinkUrl;    
                            }  
                            if(!that.isWxOpenShow&&!that.isAppLinkShow){
                                that.qrCodeNull=true;
                                that.qrcodeUrl=''
                            }else{
                                that.qrCodeNull=false;
                            }
                            that.qrcodeEvent(that.qrcodeUrl);   
                        } else {
                            that.$message({
                                showClose: true,
                                type: 'error',
                                message: '获取数据失败'
                            });
                        }
                    }).catch(err=>{
                        // that.httpStatusCode(err);
                    })         
                }else{
                    that.$message({
                        showClose: true,
                        message: '活动未开始'
                    });    
                }
                  
            },
            //复制活动链接
            copyActLink(){
                let _this = this;
                let copyBtn = new ClipboardJS(this.$refs.actCopyLink);
                let clipboard = copyBtn;
                clipboard.on('success', function(e) {
                    _this.$message({
                        message: '复制成功！',
                        type: 'success'
                    });
                });
                clipboard.on('error', function() {
                    _this.$message({
                        message: '复制失败，请手动选择复制！',
                        type: 'error'
                    });
                });
            },
            //复制链接
            copyText(){
                let _this = this;
                this.copyBtn = new ClipboardJS(this.$refs.copy);
                let clipboard = _this.copyBtn;
                clipboard.on('success', function(e) {
                    _this.$message({
                        message: '复制成功！',
                        type: 'success'
                    });
                });
                clipboard.on('error', function() {
                    _this.$message({
                        message: '复制失败，请手动选择复制！',
                        type: 'error'
                    });
                });
            },
            qrcodeEvent (url) {
                let vm = this;
                vm.$refs.qrcode.innerHTML = ''; 
                let qrcode = new QRCode(vm.$refs.qrcode, {  
                    width: 132*2,  // 设置宽度 
                    height: 132*2, // 设置高度
                    text: url
                })  
            },
            sortActivity(val){
                let vm = this;
                if(val==1){
                    this.sortItem=!this.sortItem;
                    if(this.sortItem){this.sortName='weight';this.sortOrder='desc'; }else{this.sortName='';this.sortOrder='aesc';} 
                    this.fetchActivityList();
                }else{
                    this.dateItem=!this.dateItem;
                    if(this.dateItem){
                        this.dataList=this.dataList.sort(function(a,b){
                            return new Date(a.created_at)-new Date(b.created_at)
                        })
                    }else{
                        this.dataList=this.dataList.sort(function(a,b){
                            return new Date(b.created_at)-new Date(a.created_at)
                        })
                    }
                    
                }
            },
            //点击投票记录
            voteRecord(id){
                this.$router.push({name:'voteRecordCenter',query:{'activityId': id}});
            },
            //点击投票数据
            voteData(id){
                this.$router.push({name:'voteData',query:{'activityId': id}});
            }
    	}
    }
</script>
<style>
    #activityList .tool-box .el-input-group--append{
        width:237px;
    }
    #activityList .el-loading-mask{
        background-color: rgba(0,0,0,0);
    }
    #activityList .el-loading-spinner{
        top:180%;
    }
    #qrcode{
        text-align: center;
    }
    #qrcode img{
        display: inline-block!important;
    }
    .activity-link .el-dialog{
        width:26%  !important;
    }
    .activity-link .input-like-box{
        width:60%  !important;
    } 
    .activity-link .copy-link{
        width:26%  !important;
    }
</style>
<style lang="less" scoped>
    #activityList{
        background-color: #f4f8fb;
        min-width:980px;
        min-height: 100%;
        padding:20px;
        box-sizing: border-box;
    }
    .header-box{
        height: 30px;
    }
    .category-box{
        color:#666666;
        font-size: 14px;
        float:left;
        padding-right:104px;
        border-right: 1px solid #e8e8e8;
    }
    .category-box span{
        color:#1b2b38;
    }
    .tool-box{
        // padding-left:330px;
        padding-top:20px;
        padding-bottom:10px;
        position: relative;
    }
    .tool-box ul{
        width: 282px;
        height: 47px;
        position: absolute;
        left:0;
        bottom:0;
    }
    .tool-box ul li{
        float:left;
        width: 50%;
        height: 100%;
        line-height: 47px;
        text-align: center;
        color: #888;
        border-radius: 4px 4px 0 0;
        font-size: 14px;
    }
    .tool-box ul li:not(.active){
        cursor: pointer;
    }
    .tool-box ul .active{
        color: #333;
        background-color: #f1f1f1;
    }
    .tool-box .btn{
        float:right;
        width: 90px;
        padding: 0;
        border-radius: 13px;
        background-color: #ec5463;
        color: #fff;
        font-size: 12px;
        border: 0;
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        font-weight: 400;
        text-align: center;
        margin-top: 5px;
    }
    #activityList table{
        width:100%;
        border-collapse:collapse;
    }
    #activityList table thead {
        width: 100%;
        height: 50px;
        color: #333;
        background-color: #f1f1f1;
    }
    #activityList table thead tr>td{
        height: 50px;
        width: 15%;
        text-align: center;
        font-size: 14px;
    }
    #activityList table thead tr>td>i{
        margin-left: 4px;
    }
    .activity-name{
        width:165px !important;
        overflow:hidden;
        overflow:hidden; 
        text-overflow:ellipsis; 
        white-space:nowrap;
    }
    .operate{
        cursor:pointer;
    }
    #activityList table>tbody>tr{
        border-bottom: 1px solid #efefef;
        background: #ffffff;
        height: 60px;
    }
    #activityList table>tbody>tr:hover{
        background: #effdfc;
    }
    #activityList table>tbody>tr:hover>td:first-child{
        border-color:#20a0ff;
    }
    #activityList table>tbody>tr>td:first-child{
        border-left: 3px solid #ffffff;
        box-sizing: border-box;
    }
    #activityList table>tbody>tr>td{
        font-size: 12px;
        color:#888888;
        text-align: center;
    }
    .operate-td{
        color:#2db7f5!important;
    }
    .operate-td span i{
        margin-left: 3px;
    }
    .operate-td span:nth-child(2),
    .operate-td span:nth-child(4){
        position: relative;
        top:-2px;
    }
    .operate-td span:nth-child(1),
    .operate-td span:nth-child(3),
    .operate-td span:nth-child(5){
        padding:0 5px;
        cursor: pointer;
    }
    .operate-td span:nth-child(1):hover,
    .operate-td span:nth-child(3):hover,
    .operate-td span:nth-child(5):hover{
        text-decoration: underline;
    }
    .td-more-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:-30%;
        // bottom:-140px;
        display: none;
        z-index: 2;
    }
    .condition-td{
        width:8%;
        position:relative;
    }
    .td-condition-box{
        width: 70px;
        box-shadow: 2px 2px 10px rgba(0,0,0,.3);
        background: #ffffff;
        padding:5px 0;
        position: absolute;
        left:0;
        right:0;
        margin: auto;
        top:40px;
        z-index: 2;
        max-height: 190px;
        overflow-y: auto;
        display: none;
    }
    .condition-td:hover .td-condition-box{
        display: block;
    }
    .td-more-box p,.td-condition-box p{
        color: #888888;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
    }
    .td-more-box p:hover,.td-condition-box p:hover{
        text-decoration: underline;
        color: #2db7f5;
    }
    .td-condition-box .blueColor{
        color: #2db7f5;
    }
    .more-td-btn{
        position: relative;
    }
    .more-td-btn:hover .td-more-box{
        display: block;
    }
    .add-prize-footer{
        width:100%;
        height: 87px;
        box-sizing: border-box;
        padding: 15px;
        background: #ffffff;
    }
    .page-inner{
        width: 330px;
        margin: 10px auto;
        text-align: center;
        line-height: 34px;
    }
    .upload-page-inner{
        width:550px;
    }
    .page-inner .page-btn{
        width: 36px;
        height: 24px;
        border: 0;
        padding: 0;
        background: url(../assets/img/page_icon.png) no-repeat;
        background-size: 128px 64px;
        cursor: pointer;
        position: relative;
        top:6px;
    }
    .page-inner .btn1{
        background-position: -48px -26px;
    }
    .page-inner .btn1.disable{
        background-position: -85px -26px;
    }
    .page-inner .btn2{
        background-position: -48px -1px;
    }
    .page-inner .btn2.disable{
        background-position: -85px -1px;
    }
    .page-inner span{
        font-size: 14px;
        color:#333333;
    }
    .page-inner .span1{
        padding:0 5px;
    }
    .page-inner .span2{
        padding-left:10px;
    }
    .page-inner input{
        width: 50px;
        text-align: center;
        height: 34px;
        padding: 6px 12px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.42857;
        color: #555;
        display: inline-block;
        outline: 0!important;
        box-shadow: none!important;
    }
    .page-inner .btn3{
        width: 46px;
        height: 24px;
        border: 0;
        padding: 0;
        background: url('../assets/img/page_icon.png') no-repeat;
        background-size: 128px 64px;
        cursor: pointer;
        background-position: -1px -1px;
        position: relative;
        top:7px;
        left:4px;
    }
    .page-inner .btn3.disable{
        background-position: -1px -26px;
    }
    .greenColor{
        color: #a1d568!important;
    }
    .no-data{
        padding: 50px 0;
        background-color: #fff;
        text-align: center;
        color: #888;
        font-size: 14px;
        width:100%;
    }
    .no-data span{
        color: #ec5463;
        cursor: pointer;
    }
    .no-data span:hover{
        text-decoration: underline;
    }
    .warn-text{
        color: #fa9b14;
    }
    .add-prize-mask{
        width:100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: fixed;
        top:0;
        left:0;
        bottom:0;
        z-index: 99;
    }
    #add-prize-box{
        width:800px;
        height: 490px;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.2);
        overflow: hidden;
    }
    #upload-pic-box{
        width:350px;
        height: 378px;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.2);
    }
    .add-prize-header{
        padding:15px;
        position: relative;
    }
    #upload-pic-box .add-prize-header{
        background: #f1f1f1;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
        color:#333333;
    }
    .tabs-box{
        width:100%;
        height:45px;
        
    }
   .tabs-box .tabs-items{
        width:50%;
        line-height:40px;
    }
    .tabs-box .tabs-items-active{
        border-bottom:2px solid #EC5463;
    }
    .el-icon-circle-close-outline{
        font-size: 20px;
    }
    .refresh-btn{
        width: 90px;
        padding: 0;
        border-radius: 13px;
        background-color: #ec5463;
        color: #fff;
        font-size: 12px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        right:90px;
        cursor:pointer;
    }
    .close{
        position: absolute;
        width:30px;
        height: 30px;
        top:20px;
        right:20px;
        background: url('../assets/img/close.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .upload-close{
        position: absolute;
        width:20px;
        height: 20px;
        top:14px;
        right:20px;
        background: url('../assets/img/close.png');
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .upload-body{
        width:100%;
        height:390px;
        overflow:hidden;
        background: #fff;
    }
    .upload-left-box{
        float: left;
        // width:610px;
        height: 333px;
        background: url(../assets/img/back-left.jpg);
    }
    .upload-right-box{
        width:283px;
        height: 333px;
        background: #ffffff;
        padding-top: 20px;
        box-sizing: border-box;
        margin:auto;
    }
    .loading-code{
        width:50px;
        height:50px;
        margin:30px auto; 
        img{
            width:100%;
            height:100%;
        }
    }
   .tabs-box div.upload-null{
        border-bottom:none;
        color:#999;
    }
    .qrcode-box{
        width:168px;
        height: 168px;
        margin: 0 auto;
        border: 1px solid #efefef;
    }
     .text-hit{
        padding:40px;
    }
    .upload-right-box p{
        font-size: 14px;
        color:#333333;
        line-height: 44px;
        text-align: center;
    }
    .input-like-box{
        width:170px;
        height: 34px;
        box-sizing: border-box;
        border:1px solid #efefef;
        background: #f4f8fb;
        position: relative;
        line-height: 32px;
        padding-left: 12px;
        font-size: 12px;
        color: #9c9d9d;
        overflow: hidden;
        margin-left: 20px;
    }
    .copy-link{
        height:34px;
        width: 47px;
        background: #ec5463;
        color:#ffffff;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }
    .copy-link:active{
        background:#E01527;
    }
    .item-green{
        color:#a1d568 !important;
    }
    .item-gray{
        color:#999 !important;
    }
    .item-yellow{
        color:#F7BA2A !important;
    }
</style>
